<template>
<div class="userInfo">
  <div class="card">
    <div class="avatar">
      <img :src="photo" alt="">
    </div>
    <div class="info">
      <p class="name">{{name}}</p>
      <p class="type">
        <img src="@as/img/dangyuan.png" alt="">
        <span>{{party_posts}}</span>
      </p>
    </div>
  </div>
  <ul class="content">
    <li>
      <div class="label">姓名：</div>
      <div class="value">{{name}}</div>
    </li>
    <li>
      <div class="label">党员类型：</div>
      <div class="value">{{party_status}}</div>
    </li>
    <li>
      <div class="label">入党时间：</div>
      <div class="value">{{party_time}}</div>
    </li>
    <li>
      <div class="label">所属党支部：</div>
      <div class="value">{{organization}}</div>
    </li>
    <li>
      <div class="label">党内职务：</div>
      <div class="value">{{party_posts}}</div>
    </li>
    <li>
      <div class="label">最高学历：</div>
      <div class="value">{{edu}}</div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      photo: '',
      party_posts: '',
      party_status: '',
      party_time: '',
      organization: '',
      edu: ''
    }
  },
    methods:{
        getInfo(){
            this.$http.get('app/my/myinfo',{
                uid:JSON.parse(Cookies.get('user_71ydj')).id
            }).then((res)=>{
                console.log(res)
                this.name = res.data.name
                this.photo = res.data.photo
                this.party_posts = res.data.party_posts
                this.party_status = res.data.party_status
                this.party_time = res.data.party_time
                this.organization = res.data.par_org_name
                this.edu = res.data.edu
            })
        }
    },
  created() {
    // let data = JSON.parse(Cookies.get('user_71ydj'))
    // this.name = data.name
    // this.photo = data.photo
    // this.party_posts = data.party_posts
    // this.party_status = data.party_status
    // this.party_time = data.party_time
    // this.organization = data.organization
    // this.edu = data.edu
  },
  mounted(){
    this.$progress.done();
    this.getInfo();
  },
  components: {

  }
}
</script>

<style lang="scss" scoped>
.card{
  display: flex;
  width:375px;
  height:185px;
  background:url(../../../../assets/img/userinfo_bg.png) center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 52px 32px;
  .avatar{
    width:61px;
    height:61px;
    background:rgba(244,244,244,1);
    border-radius:50%;
    margin-right: 15px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .info{
    flex: 1;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(255,255,255,1);
    .name{
      font-size:17px;
      padding-top: 8px;
      margin-bottom: 8px;
    }
    .type{
      font-size:12px;
      img{
        width:9px;
        height:11px;
        margin-right: 5px;
      }
    }
  }
}
.content{
  box-sizing: border-box;
  padding: 23px 32px;
  li{
    display: flex;
    line-height: 50px;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    .label{
      position: relative;
      font-size:14px;
      color:rgba(102,102,102,1);
      padding-left: 9px;
      width: 96px;
      &::before{
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width:4px;
        height:4px;
        background:rgba(235,77,68,1);
        border-radius:50%;
      }
    }
    .value{
      font-size:14px;
      color:rgba(51,51,51,1);
    }
  }
}
</style>
